<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-14 17:19:29
 * @LastEditors: your name
 * @LastEditTime: 2021-05-17 10:18:08
 * @Description: file content
-->
<route>
{
  "meta":{
    "title":"操作记录",
    "showMenu":true,
    "serialNum": 30
  }
}
</route>
<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.submitter"
          placeholder="操作人"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-date-picker
          style="width:100%"
          v-model="queryData.startTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择开始时间"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          style="width:100%"
          v-model="queryData.endTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择结束时间">
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div class="custom-json custom-json_tip">
            <span class="custom-json_title">入参：</span>
            <pre>{{ scope.row.requestJson }}</pre>
          </div>
          <div v-if="scope.row.responseJson.includes(successMsg)" class="custom-json custom-json_success">
            <span class="custom-json_title">出参：</span>
            <pre>{{ scope.row.responseJson }}</pre>
          </div>
          <div v-else class="custom-json custom-json_warning">
            <span class="custom-json_title">出参：</span>
            <pre>{{ scope.row.responseJson }}</pre>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createDate " label="操作时间">
        <template slot-scope="scope">
          {{ scope.row.createDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="tenantUserName" label="操作人"/>
      <el-table-column prop="operationInfo" label="操作记录"/>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>

  </div>
</template>

<script>
import { getHmoperationlogPageList } from '@/apis/paas/HmOperationLogController.js'

export default {
  name: 'OperationLog',
  data () {
    return {
      loading: false,
      queryData: {},
      pageData: {
        pageSize: 10,
        pageNo: 1
      },
      tableData: [],
      total: 0,
      successMsg: '"message": "hm.paas.ok"'
    }
  },

  created () {
    this.loadData()
  },

  methods: {
    loadData () {
      this.loading = true
      getHmoperationlogPageList({
        ...this.queryData,
        ...this.pageData
      }).then(res => {
        this.tableData = res.data
        this.total = res.totalCount
      }).finally(() => {
        this.loading = false
      })
    },

    handleReset () {
      this.queryData = {}
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-json{
  padding: 8px 16px;
  border-radius: 4px;
  line-height: 2;
  margin: 0;
  overflow: auto;

  pre{
    margin: 0;
  }

  &_title{
    font-weight: bold;
    user-select: none;
  }

  &:not(:first-child){
    margin-top: 10px;
  }

  &_tip{
    background-color: #ecf8ff;
    border-left: 5px solid #50bfff;
  }
  &_success{
    background-color: #f0f9eb;
    border-left: 5px solid #67C23A;
  }
  &_warning{
    background-color: #fff6f7;
    border-left: 5px solid #fe6c6f;
  }
}
</style>
